<template>
    <div class="benefit_container">
        <HeaderTop :goBack="true" :headTitle="'优惠券'"></HeaderTop>
        <section v-if="!showLoading">
            <section class="category_title">
                <span :class="{selected:categoryType===1}" @click="categoryType=1">红包</span>
                <span :class="{selected:categoryType===2}" @click="categoryType=2">商家代金券</span>
            </section>
            <transition name="router-fade">
                <section v-if="categoryType === 1" class="hongbao_section">
                    <section class="hongbao_container">
                        <header class="total_number">
                            <section>
                                有 <span>{{hongbaoList.length}}</span> 个红包即将到期
                            </section>
                            <section class="hongbao_description">
                                <img :src="hb_question" height="24" width="24">
                                <router-link to="/benefit/hbDescription" class="hongbao_detail">红包说明</router-link>
                            </section>
                        </header>
                        <HongbaoList :list="hongbaoList"></HongbaoList>
                    </section>
                    <router-link to="/benefit/hbHistory" class="history_hongbao">
                        <span class="check_history">查看历史红包</span>
                        <svg class="history_right">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </router-link>
                    <div class="hongbao_footer_empty"></div>
                    <footer class="hongbao_footer">
                        <router-link to="/benefit/exchange" class="hongbao_style" style="border-right: 1px solid #f5f5f5">
                            兑换红包
                        </router-link>
                        <router-link to="/benefit/commend" class="hongbao_style">
                            推荐有奖
                        </router-link>
                    </footer>
                </section>
            </transition>
            <transition name="router-fade">
                <section class="voucher_section" v-if="categoryType === 2">
                    <section class="hongbao_description voucher_header">
                        <img :src="hb_question" height="24" width="24">
                        <router-link to="/benefit/hbDescription" class="hongbao_detail">商家代金券说明</router-link>
                    </section>
                    <section class="unable_use">
                        <img :src="no_use_img" height="170" width="300">
                        <p>无法使用代金券</p>
                        <p>非客户端或客户端版本过低</p>
                        <router-link to="/download" class="download_app">
                        下载或升级客户端
                        </router-link>
                    </section>
                </section>
            </transition>
        </section>
        <loading v-show="showLoading"></loading>
        <transition name="router-slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import HeaderTop from '@src/components/header/HeaderTop';
import HongbaoList from '@src/components/common/HongBaoList';
import {mapState,mapActions} from 'vuex';
import {getHongbaoNum} from '@src/api/getData';

export default {
    components:{
        HeaderTop,
        HongbaoList
    },
    data(){
        return {
            hb_question:require('../../assets/imgs/description.png').default,
            no_use_img:require('../../assets/imgs/voucher.png').default,
            showAlert: false, //弹出框
            alertText: null, //弹出框文字
            showLoading: true, //加载动画
            hongbaoList: [], //红包列表
            categoryType: 1, //红包与商家代金券切换
        }
    },
    computed:{
        ...mapState(['user'])
    },
    mounted(){
        this.initData();
    },
    methods:{
        async initData(){
            if(this.user && this.user.user_id){
                this.hongbaoList = await getHongbaoNum(this.user.user_id);
                this.showLoading=false;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.benefit_container{
    padding-top: 1.95rem;
    p, span{
        font-family: Helvetica Neue,Tahoma,Arial;
    }
    .category_title{
        @include fj(space-around);
        align-items: center;
        background: #fff;
        height: 2rem;
        span{
            padding-bottom: 0.2rem;
            @include sc(0.7rem,#666);
            border-bottom: 0.1rem solid #fff;
            &.selected{
                border-color: $blue;
                color: $blue;
            }
        }
    }
    .hongbao_section{
        .hongbao_container{
            padding: 0 0.7rem;
            .total_number{
                @include fj;
                font-size: 0.5rem;
                line-height: 2rem;
                span{
                    font-size: 0.55rem;
                    color: #ff5340;
                    font-weight: 700;
                }
            }
            
        }
        .history_hongbao{
            padding: 0.5rem 0rem;
            display: flex;
            align-items: center;
            justify-content: center;
            .check_history{
                @include sc(0.65rem,#999);
                margin-right: .2rem;
            }
            .history_right{
                @include wh(0.6rem,0.6rem);
                fill:#999;
            }
        }
        .hongbao_footer_empty{
            height: 2.2rem;
        }
        .hongbao_footer{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            display: flex;
            .hongbao_style{
                flex: 1;
                @include sc(0.75rem,#666);
                line-height: 2rem;
                text-align: center;
            }
        }
    }
    .voucher_section{

        .voucher_header{
            height: 2rem;
            justify-content: flex-end;
            margin-right: 0.5rem;
        }
        .unable_use{
            margin-top: 4rem;
            text-align: center;
            img{
                @include wh(6rem, 3.4rem);
            }
            p:nth-of-type(1){
                @include sc(.7rem, #666);
                margin-top: .4rem;
            }
            p:nth-of-type(2){
                @include sc(.5rem, #999);
                margin-top: .3rem;
                margin-bottom: .3rem;
            }
            .download_app{
                background-color: #56d176;
                @include sc(.65rem, #fff);
                padding: .3rem;
                border-radius: .15rem;
            }
        }
    }
    .hongbao_description{
        display: flex;
        align-items: center;
        img{
            @include wh(0.6rem,0.6rem);
            margin-right: 0.2rem;
        }
        .hongbao_detail{
            font-size: 0.5rem;
            color: $blue;
        }
    }
}

.router-fade-enter, .router-fade-leave-active {
    opacity: 0;
}
.router-fade-enter-active, .router-fade-leave-active {
    transition: opacity .3s;
}
.router-slide-enter, .router-slide-leave-active {
    transform: translateX(2rem);
    opacity: 0;
}
.router-slide-enter-active, .router-slide-leave-active {
    transition: all .4s ease-in-out;
}
</style>